"use client"

import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";


type CarouselProps = {
    children: React.ReactNode[]
}
const Carousel = ({
    children
}: CarouselProps) => {
    const [current, setCurrent] = useState(0);
    const count = useRef(React.Children.count(children));
    const parentRef = useRef<HTMLDivElement>(null);
    const contentRef = useRef<HTMLDivElement>(null);
    const [width, setWidth] = useState(0);
    const [time, setTime] = useState<NodeJS.Timeout>();
    const [style, setStyle] = useState<React.CSSProperties>({});
    const [time1, setTime1] = useState<NodeJS.Timeout>();
    const [moving, setMoving] = useState(false);
    useEffect(() => {
        const resizeObserver = new ResizeObserver(([dom]) => {
            setWidth(dom.target.clientWidth);
        })
        if (!parentRef.current) return;
        setWidth(parentRef.current.offsetWidth)
        resizeObserver.observe(parentRef.current);
        return () => {
            if (parentRef.current) resizeObserver.unobserve(parentRef.current);
        }
    }, []);
    const getTranslate = useCallback((count: number) => `translate3d(-${(count + 1) * width}px,0px,0px)`, [width]);
    useEffect(() => {
        if (!width) return;
        const time = setTimeout(() => {
            setStyle({
                transform: getTranslate(current)
            })
            setMoving(false);
        }, 400)
        setTime1(time);
        return () => {
            clearTimeout(time);
        }
    }, [current, width]);
    const changeCurrent = useCallback((index: number) => {
        if (moving) return;
        setMoving(true);
        setStyle({
            transform: getTranslate(index),
            transition: ".4s"
        });
        if (index === 0) index = count.current - 1;
        if (index === count.current) index = 0
        setCurrent(index);
    }, [count.current, getTranslate, moving]);
    const next = useCallback(() => {
        changeCurrent(current + 1);
    }, [current, changeCurrent]);
    const prev = useCallback(() => {
        changeCurrent(current - 1);
    }, [current, changeCurrent]);
    useEffect(() => {
        if (!width) return;
        const time = setTimeout(() => {
            next();
        }, 3000)
        setTime(time);
        if (!parentRef.current) return;
    }, [next, width]);
    useEffect(() => {
        return () => {
            clearTimeout(time);
            clearTimeout(time1);
        }
    }, [time, time1]);
    const doms = useMemo(() => {
        const arr = new Array(count.current + 2);
        for (let i = 0; i < count.current; i++) {
            arr[i + 1] = children[i];
        }
        arr[0] = children[count.current - 1];
        arr[count.current + 1] = children[0];
        return arr;
    }, [children, count.current]);

    return (
        <div ref={parentRef} className="w-full overflow-hidden">
            <div className="flex" ref={contentRef} style={{ width: width * (count.current + 2), ...style }}>
                {doms.map((dom, key) => (
                    <div key={key} style={{ width }}>
                        {dom}
                    </div>
                ))}
            </div>
            {/* <div>left</div>
            <div>right</div> */}
        </div>
    )
}
export default Carousel